<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        //------------let与const------------------
        function testVarLet() {
            if (true) {
                var varVariable = '我是 var 声明的';
                let letVariable = '我是 let 声明的';
            }
            console.log(varVariable); // 输出： '我是 var 声明的'
            //console.log(letVariable); // 报错： letVariable 未定义
        }
        testVarLet()
        const greeting = 'Hello, Vue!';
        //greeting = 'Hello, JavaScript!'; // 报错：不能给常量重新赋值
        
        //--------------箭头函数-------------------
        // 传统函数表达式
        const traditionalFunction = function(message) {
            console.log(message);
        };

        // 箭头函数
        const arrowFunction = (message,b) => {
            console.log(message);
        }
        //-------------模板字符串----------------------
        const nameStr = 'Vue';
        const message = `Hello, ${nameStr}!`;
        console.log(message); // 输出： 'Hello, Vue!'
        const multiLineText = `这是一个
        多行的字符串
        使用模板字符串`;

        //-------------解构赋值--------------------
        //数组解构
        const numbers = [1, 2, 3];
        const [one, two, three] = numbers;
        //对象解构
        const person = {
            name: 'Vue',
            age: 3
        };
        const { name, age } = person;

        //---------扩展运算符和剩余参数-------------
        //合并数组
        const nums1 = [1, 2, 3];
        const nums2 = [4, 5, 6];
        //[1, 2, 3, 4, 5, 6]
        const combined = [...nums1, ...nums2];

        //扩展运算符同样适用于对象
        const obj1 = { a: 1, b: 2 };
        const obj2 = { b: 3, c: 4 };
        //{ a: 1, b: 3, c: 4 }
        const combinedObj = { ...obj1, ...obj2 };

        function concatenate(separator, ...strings) {
            return strings.join(separator);
        }
        // 输出： 'Vue-React-Angular'
        console.log(concatenate("-", "Vue", "React", "Angular")); 

        //-------------Promises 和异步编程---------------
        const myPromise = new Promise((resolve, reject) => {
            // 异步操作
            const success = true; // 假设这是根据异步操作结果得出的值
            if (success) {
                resolve('操作成功');
            } else {
                reject('操作失败');
            }
        });
        myPromise
            .then(value => {
                console.log(value); // 如果成功，输出： '操作成功'
            })
            .catch(error => {
                console.log(error); // 如果失败，输出： '操作失败'
            });

        async function asyncFunction() {
            try {
                const result = await myPromise; // 等待 myPromise 解决
                console.log(result); // 如果 myPromise 被解决，执行此行
            } catch (error) {
                console.log(error); // 如果 myPromise 被拒绝，执行此行
            }
        }
        asyncFunction()

    </script>
</body>
</html>